<template>
  <div v-if="!paramsError" class="app-container detail-container">
    <div class="detail-title">
      {{ textMap[type] }}
    </div>
    <el-form ref="form" :rules="rules" :model="form" :label-width="labelWidth" class="detail-form">
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item :label="lang.systemManage.params.index.tableCol.name" prop="name">
            <el-input v-model.trim="form.name" :placeholder="`请输入${lang.systemManage.params.index.tableCol.name}`" maxlength="50"/>
          </el-form-item>
          <el-form-item :label="lang.systemManage.params.index.tableCol.code" prop="code">
            <el-input v-model.trim="form.code" :disabled="type === 'detail'" :placeholder="`请输入${lang.systemManage.params.index.tableCol.code}`" maxlength="50"/>
          </el-form-item>
          <el-form-item :label="lang.systemManage.params.index.tableCol.value" prop="value">
            <el-input v-model.trim="form.value" :placeholder="`请输入${lang.systemManage.params.index.tableCol.value}`" maxlength="500" />
          </el-form-item>
          <el-form-item :label="lang.systemManage.params.index.tableCol.remark">
            <el-input v-model.trim="form.remark" :autosize="{minRows: 5, maxRows: 10}" :placeholder="`请输入${lang.systemManage.params.index.tableCol.remark}`" type="textarea" maxlength="240"/>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="9">
        </el-col> -->
      </el-row>
    </el-form>
    <div :style="{'padding-left': labelWidth}" class="detail-buttons">
      <el-button v-waves v-if="type === 'create'" :loading="saveLoading" type="primary" @click="save()">
        {{ lang.systemManage.params.detail.operationBtn.create }}
      </el-button>
      <el-button v-waves v-else :loading="saveLoading" type="primary" @click="edit()">
        {{ lang.systemManage.params.detail.operationBtn.update }}
      </el-button>
      <el-button v-waves type="default" @click="$$closeTag()">
        {{ lang.systemManage.params.detail.operationBtn.close }}
      </el-button>
    </div>
  </div>
</template>

<script>
import CloseTagMixin from '@/mixins/closeTag'
import { getParamsById, paramsAdd, paramsUpdate } from '@/api/systemManage/params'
import waves from '@/directive/waves' // Waves directive
import { mapGetters } from 'vuex'

export default {
  name: 'ParamsManageItem',
  directives: { waves },
  components: {
  },
  mixins: [CloseTagMixin],
  data() {
    const langIndex = this.$store.getters.lang.systemManage.params.index
    const langDetail = this.$store.getters.lang.systemManage.params.detail
    return {
      textMap: {
        create: langDetail.titleTag.create2,
        detail: langDetail.titleTag.detail
      },
      labelWidth: '100px',
      id: this.$route.params.id,
      type: this.$route.params.type,
      saveLoading: false,
      paramsError: false,
      selectHeadImgInput: null,
      headImg: null,
      form: {},
      defaultPassword: this.$store.getters.defaultPassword,
      rules: {
        name: [
          { required: true, message: `请输入${langIndex.tableCol.name}`, trigger: 'blur' }
        ],
        code: [
          { required: true, message: `请输入${langIndex.tableCol.code}`, trigger: 'blur' }
        ],
        value: [
          { required: true, message: `请输入${langIndex.tableCol.value}`, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'lang'
    ])
  },
  created() {
    // 参数type验证
    switch (this.type) {
      case 'create':
        // 设置标签名称
        this.$store.dispatch('setTagName', {
          path: this.$route.path,
          title: this.lang.systemManage.params.detail.titleTag.create
        })
        break
      case 'detail': this.getInfo(); break
      default: {
        this.paramsError = true
        this.$message.info('页面参数不正确，请重新打开页面！')
        return
      }
    }
    // 初始化数据模板
    this.formReset()
  },
  methods: {
    formReset() {
      this.form = {
        name: '',
        code: '',
        value: '',
        remark: ''
      }
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    getInfo() {
      getParamsById(this.id).then(res => {
        const data = res.data
        this.form = data
        // 设置标签名称
        this.$store.dispatch('setTagName', {
          path: this.$route.path,
          title: `${data.name}-${this.lang.systemManage.params.detail.titleTag.detail}`
        })
      }).catch(e => {
        this.$message.error(this.$store.getters.errorMsg)
      })
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.saveLoading = true
          paramsAdd(this.form).then(res => {
            this.saveLoading = false
            if (res.code === 200) {
              this.$message.success('创建成功！')
              this.formReset()
            } else {
              this.$message.error(res.message)
            }
          }).catch(e => {
            this.this.saveLoading = false
            this.$message.error(this.$store.getters.errorMsg)
          })
        } else return false
      })
    },
    edit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.saveLoading = true
          paramsUpdate(this.form).then(res => {
            this.saveLoading = false
            if (res.code === 200) {
              this.$message.success('更新成功！')
            } else {
              this.$message.error(res.message)
            }
          }).catch(e => {
            this.this.saveLoading = false
            this.$message.error(this.$store.getters.errorMsg)
          })
        } else return false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

